జావాస్క్రిప్ట్ అబార్ట్‌కంట్రోలర్: అసమకాలిక ఆపరేషన్లను రద్దు చేయడంలో నైపుణ్యం

ఆధునిక వెబ్ డెవలప్‌మెంట్‌లో, అసమకాలిక ఆపరేషన్లు సర్వసాధారణం. APIల నుండి డేటాను పొందడం, టైమర్‌లను సెట్ చేయడం మరియు వినియోగదారు ఇంటరాక్షన్‌లను నిర్వహించడం వంటివి తరచుగా స్వతంత్రంగా మరియు ఎక్కువ కాలం పాటు నడిచే కోడ్‌ను కలిగి ఉంటాయి. అయితే, ఈ ఆపరేషన్‌లు పూర్తికాకముందే వాటిని రద్దు చేయాల్సిన సందర్భాలు ఉంటాయి. ఇక్కడే జావాస్క్రిప్ట్‌లోని AbortController ఇంటర్‌ఫేస్ సహాయానికి వస్తుంది. ఇది DOM ఆపరేషన్లు మరియు ఇతర అసమకాలిక పనులకు రద్దు అభ్యర్థనలను సూచించడానికి ఒక శుభ్రమైన మరియు సమర్థవంతమైన మార్గాన్ని అందిస్తుంది.

రద్దు చేయవలసిన అవసరాన్ని అర్థం చేసుకోవడం

సాంకేతిక వివరాల్లోకి వెళ్లే ముందు, అసమకాలిక ఆపరేషన్‌లను రద్దు చేయడం ఎందుకు ముఖ్యమో అర్థం చేసుకుందాం. ఈ సాధారణ సందర్భాలను పరిగణించండి:

• వినియోగదారు నావిగేషన్: ఒక వినియోగదారు శోధన ప్రశ్నను ప్రారంభిస్తారు, ఇది ఒక API అభ్యర్థనను ప్రేరేపిస్తుంది. వారు అభ్యర్థన పూర్తికాకముందే వేరే పేజీకి త్వరగా నావిగేట్ అయితే, అసలు అభ్యర్థన అసంబద్ధం అవుతుంది మరియు అనవసరమైన నెట్‌వర్క్ ట్రాఫిక్ మరియు సంభావ్య దుష్ప్రభావాలను నివారించడానికి దాన్ని రద్దు చేయాలి.
• టైమ్‌అవుట్ నిర్వహణ: మీరు ఒక అసమకాలిక ఆపరేషన్ కోసం టైమ్‌అవుట్ సెట్ చేస్తారు. ఆపరేషన్ టైమ్‌అవుట్ గడువు ముగియకముందే పూర్తయితే, అనవసరమైన కోడ్ అమలును నివారించడానికి మీరు టైమ్‌అవుట్‌ను రద్దు చేయాలి.
• కాంపోనెంట్ అన్‌మౌంటింగ్: రియాక్ట్ లేదా Vue.js వంటి ఫ్రంట్-ఎండ్ ఫ్రేమ్‌వర్క్‌లలో, కాంపోనెంట్లు తరచుగా అసమకాలిక అభ్యర్థనలను చేస్తాయి. ఒక కాంపోనెంట్ అన్‌మౌంట్ అయినప్పుడు, ఆ కాంపోనెంట్‌తో అనుబంధించబడిన ఏవైనా కొనసాగుతున్న అభ్యర్థనలను రద్దు చేయాలి. ఇది మెమరీ లీక్‌లను మరియు అన్‌మౌంట్ చేయబడిన కాంపోనెంట్లను అప్‌డేట్ చేయడం వల్ల కలిగే ఎర్రర్‌లను నివారిస్తుంది.
• వనరుల పరిమితులు: వనరుల పరిమితులు ఉన్న పరిసరాలలో (ఉదా., మొబైల్ పరికరాలు, ఎంబెడెడ్ సిస్టమ్స్), అనవసరమైన ఆపరేషన్‌లను రద్దు చేయడం వల్ల విలువైన వనరులను ఆదా చేసి పనితీరును మెరుగుపరచవచ్చు. ఉదాహరణకు, వినియోగదారు పేజీలోని ఒక విభాగాన్ని దాటి స్క్రోల్ చేస్తే పెద్ద ఇమేజ్ డౌన్‌లోడ్‌ను రద్దు చేయడం.

AbortController మరియు AbortSignal పరిచయం

అసమకాలిక ఆపరేషన్‌లను రద్దు చేసే సమస్యను పరిష్కరించడానికి AbortController ఇంటర్‌ఫేస్ రూపొందించబడింది. ఇది రెండు కీలక భాగాలను కలిగి ఉంటుంది:

• AbortController: ఈ ఆబ్జెక్ట్ రద్దు సిగ్నల్‌ను నిర్వహిస్తుంది. దీనికి ఒకే ఒక పద్ధతి ఉంది, abort(), ఇది రద్దు అభ్యర్థనను సూచించడానికి ఉపయోగించబడుతుంది.
• AbortSignal: ఈ ఆబ్జెక్ట్ ఒక ఆపరేషన్‌ను రద్దు చేయాలని సూచించే సిగ్నల్‌ను సూచిస్తుంది. ఇది AbortControllerతో అనుబంధించబడి ఉంటుంది మరియు రద్దు చేయగల అసమకాలిక ఆపరేషన్‌కు పంపబడుతుంది.

ప్రాథమిక వినియోగం: Fetch అభ్యర్థనలను రద్దు చేయడం

ఒక fetch అభ్యర్థనను రద్దు చేసే ఒక సాధారణ ఉదాహరణతో ప్రారంభిద్దాం:

            
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// To cancel the fetch request:
controller.abort();

            

              
                Copy
              
            
          

వివరణ:

1. మేము ఒక AbortController ఇన్‌స్టాన్స్‌ను సృష్టిస్తాము.
2. మేము controller నుండి అనుబంధిత AbortSignalను పొందుతాము.
3. మేము signalను fetch ఆప్షన్‌లకు పంపుతాము.
4. అభ్యర్థనను రద్దు చేయాలంటే, మేము controller.abort() అని పిలుస్తాము.
5. .catch() బ్లాక్‌లో, ఎర్రర్ ఒక AbortError అవునో కాదో మేము తనిఖీ చేస్తాము. అది అయితే, అభ్యర్థన రద్దు చేయబడిందని మాకు తెలుస్తుంది.

AbortError ను నిర్వహించడం

controller.abort() అని పిలిచినప్పుడు, fetch అభ్యర్థన AbortErrorతో తిరస్కరించబడుతుంది. మీ కోడ్‌లో ఈ ఎర్రర్‌ను సరిగ్గా నిర్వహించడం చాలా ముఖ్యం. అలా చేయడంలో విఫలమైతే, నిర్వహించని ప్రామిస్ తిరస్కరణలు మరియు అనూహ్య ప్రవర్తనకు దారితీయవచ్చు.

ఎర్రర్ హ్యాండ్లింగ్‌తో కూడిన మరింత పటిష్టమైన ఉదాహరణ ఇక్కడ ఉంది:

            
const controller = new AbortController();
const signal = controller.signal;

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
      return null; // Or throw the error to be handled further up
    } else {
      console.error('Fetch error:', error);
      throw error; // Re-throw the error to be handled further up
    }
  }
}

fetchData();

// To cancel the fetch request:
controller.abort();

            

              
                Copy
              
            
          

AbortError ను నిర్వహించడానికి ఉత్తమ పద్ధతులు:

• ఎర్రర్ పేరును తనిఖీ చేయండి: మీరు సరైన ఎర్రర్ రకాన్ని నిర్వహిస్తున్నారని నిర్ధారించుకోవడానికి ఎల్లప్పుడూ error.name === 'AbortError' అని తనిఖీ చేయండి.
• డిఫాల్ట్ విలువను తిరిగి ఇవ్వండి లేదా తిరిగి త్రో చేయండి: మీ అప్లికేషన్ యొక్క లాజిక్‌పై ఆధారపడి, మీరు డిఫాల్ట్ విలువను (ఉదా., null) తిరిగి ఇవ్వవచ్చు లేదా కాల్ స్టాక్‌లో మరింత పైకి నిర్వహించడానికి ఎర్రర్‌ను తిరిగి త్రో చేయవచ్చు.
• వనరులను శుభ్రపరచండి: అసమకాలిక ఆపరేషన్ ఏవైనా వనరులను కేటాయించినట్లయితే (ఉదా., టైమర్‌లు, ఈవెంట్ లిజనర్‌లు), వాటిని AbortError హ్యాండ్లర్‌లో శుభ్రపరచండి.

AbortSignal తో టైమర్‌లను రద్దు చేయడం

AbortSignal ను setTimeout లేదా setInterval తో సృష్టించిన టైమర్‌లను రద్దు చేయడానికి కూడా ఉపయోగించవచ్చు. దీనికి కొంచెం ఎక్కువ మాన్యువల్ పని అవసరం, ఎందుకంటే అంతర్నిర్మిత టైమర్ ఫంక్షన్లు నేరుగా AbortSignal కు మద్దతు ఇవ్వవు. అబార్ట్ సిగ్నల్ కోసం వినే మరియు అది ప్రేరేపించబడినప్పుడు టైమర్‌ను క్లియర్ చేసే ఒక కస్టమ్ ఫంక్షన్‌ను మీరు సృష్టించాలి.

            
function cancellableTimeout(callback, delay, signal) {
  let timeoutId;

  const timeoutPromise = new Promise((resolve, reject) => {
    timeoutId = setTimeout(() => {
      resolve(callback());
    }, delay);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('Timeout Aborted'));
    });
  });

  return timeoutPromise;
}

const controller = new AbortController();
const signal = controller.signal;


cancellableTimeout(() => {
  console.log('Timeout executed');
}, 2000, signal)
.then(() => console.log("Timeout finished successfully"))
.catch(err => console.log(err));

// To cancel the timeout:
controller.abort();

            

              
                Copy
              
            
          

వివరణ:

1. cancellableTimeout ఫంక్షన్ ఒక కాల్‌బ్యాక్, ఒక ఆలస్యం, మరియు ఒక AbortSignal ను ఆర్గ్యుమెంట్లుగా తీసుకుంటుంది.
2. ఇది ఒక setTimeout ను సెట్ చేస్తుంది మరియు టైమ్‌అవుట్ IDని నిల్వ చేస్తుంది.
3. ఇది abort ఈవెంట్ కోసం వినే ఒక ఈవెంట్ లిజనర్‌ను AbortSignal కు జోడిస్తుంది.
4. abort ఈవెంట్ ప్రేరేపించబడినప్పుడు, ఈవెంట్ లిజనర్ టైమ్‌అవుట్‌ను క్లియర్ చేస్తుంది మరియు ప్రామిస్‌ను తిరస్కరిస్తుంది.

ఈవెంట్ లిజనర్‌లను రద్దు చేయడం

టైమర్‌ల మాదిరిగానే, మీరు ఈవెంట్ లిజనర్‌లను రద్దు చేయడానికి AbortSignal ను ఉపయోగించవచ్చు. అన్‌మౌంట్ చేయబడుతున్న కాంపోనెంట్‌తో అనుబంధించబడిన ఈవెంట్ లిజనర్‌లను తొలగించాలనుకున్నప్పుడు ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది.

            
const controller = new AbortController();
const signal = controller.signal;

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
}, { signal });

// To cancel the event listener:
controller.abort();

            

              
                Copy
              
            
          

వివరణ:

1. మేము signal ను addEventListener పద్ధతికి ఒక ఆప్షన్‌గా పంపుతాము.
2. controller.abort() అని పిలిచినప్పుడు, ఈవెంట్ లిజనర్ స్వయంచాలకంగా తీసివేయబడుతుంది.

రియాక్ట్ కాంపోనెంట్లలో AbortController

రియాక్ట్‌లో, ఒక కాంపోనెంట్ అన్‌మౌంట్ అయినప్పుడు అసమకాలిక ఆపరేషన్‌లను రద్దు చేయడానికి మీరు AbortControllerను ఉపయోగించవచ్చు. అన్‌మౌంట్ చేయబడిన కాంపోనెంట్లను అప్‌డేట్ చేయడం వల్ల కలిగే మెమరీ లీక్‌లు మరియు ఎర్రర్‌లను నివారించడానికి ఇది చాలా అవసరం. useEffect హుక్ ఉపయోగించి ఒక ఉదాహరణ ఇక్కడ ఉంది:

            
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      }
    }

    fetchData();

    return () => {
      controller.abort(); // Cancel the fetch request when the component unmounts
    };
  }, []); // Empty dependency array ensures this effect runs only once on mount

  return (
    

      {data ? (
        
Data: {JSON.stringify(data)}
      ) : (
        
Loading...
      )}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

వివరణ:

1. మేము useEffect హుక్‌లో ఒక AbortController ను సృష్టిస్తాము.
2. మేము signal ను fetch అభ్యర్థనకు పంపుతాము.
3. మేము useEffect హుక్ నుండి ఒక క్లీనప్ ఫంక్షన్‌ను తిరిగి ఇస్తాము. కాంపోనెంట్ అన్‌మౌంట్ అయినప్పుడు ఈ ఫంక్షన్ పిలవబడుతుంది.
4. క్లీనప్ ఫంక్షన్ లోపల, మేము ఫెచ్ అభ్యర్థనను రద్దు చేయడానికి controller.abort() అని పిలుస్తాము.

అధునాతన వినియోగ సందర్భాలు

AbortSignal లను చైనింగ్ చేయడం

కొన్నిసార్లు, మీరు బహుళ AbortSignalలను కలిసి చైన్ చేయాలనుకోవచ్చు. ఉదాహరణకు, మీరు ఒక పేరెంట్ కాంపోనెంట్ దాని చైల్డ్ కాంపోనెంట్లలోని ఆపరేషన్‌లను రద్దు చేయాల్సి రావచ్చు. ఒక కొత్త AbortController ను సృష్టించి, దాని సిగ్నల్‌ను పేరెంట్ మరియు చైల్డ్ కాంపోనెంట్లకు పంపడం ద్వారా మీరు దీన్ని సాధించవచ్చు.

థర్డ్-పార్టీ లైబ్రరీలతో AbortController ను ఉపయోగించడం

మీరు AbortSignal కు నేరుగా మద్దతు ఇవ్వని థర్డ్-పార్టీ లైబ్రరీని ఉపయోగిస్తుంటే, లైబ్రరీ యొక్క రద్దు మెకానిజంతో పని చేయడానికి మీ కోడ్‌ను మీరు స్వీకరించవలసి ఉంటుంది. దీనికి లైబ్రరీ యొక్క అసమకాలిక ఫంక్షన్లను AbortSignal ను నిర్వహించే మీ స్వంత ఫంక్షన్లలో చుట్టడం అవసరం కావచ్చు.

AbortController ను ఉపయోగించడం వల్ల కలిగే ప్రయోజనాలు

• మెరుగైన పనితీరు: అనవసరమైన ఆపరేషన్‌లను రద్దు చేయడం వల్ల నెట్‌వర్క్ ట్రాఫిక్, CPU వాడకం, మరియు మెమరీ వినియోగాన్ని తగ్గించి, ముఖ్యంగా వనరుల పరిమితులు ఉన్న పరికరాలలో పనితీరును మెరుగుపరచవచ్చు.
• శుభ్రమైన కోడ్: AbortController రద్దును నిర్వహించడానికి ఒక ప్రామాణిక మరియు సొగసైన మార్గాన్ని అందిస్తుంది, మీ కోడ్‌ను మరింత చదవగలిగేలా మరియు నిర్వహించగలిగేలా చేస్తుంది.
• మెమరీ లీక్‌ల నివారణ: అన్‌మౌంట్ చేయబడిన కాంపోనెంట్లతో అనుబంధించబడిన అసమకాలిక ఆపరేషన్‌లను రద్దు చేయడం వల్ల మెమరీ లీక్‌లు మరియు అన్‌మౌంట్ చేయబడిన కాంపోనెంట్లను అప్‌డేట్ చేయడం వల్ల కలిగే ఎర్రర్‌లను నివారిస్తుంది.
• మెరుగైన వినియోగదారు అనుభవం: అసంబద్ధమైన అభ్యర్థనలను రద్దు చేయడం వల్ల పాత సమాచారం ప్రదర్శించబడకుండా నివారించడం మరియు గ్రహించిన జాప్యాన్ని తగ్గించడం ద్వారా వినియోగదారు అనుభవాన్ని మెరుగుపరచవచ్చు.

బ్రౌజర్ అనుకూలత

AbortController కు క్రోమ్, ఫైర్‌ఫాక్స్, సఫారి, మరియు ఎడ్జ్ వంటి ఆధునిక బ్రౌజర్‌లలో విస్తృతంగా మద్దతు ఉంది. తాజా సమాచారం కోసం మీరు MDN వెబ్ డాక్స్‌లో అనుకూలత పట్టికను తనిఖీ చేయవచ్చు.

పాలీఫిల్స్

AbortController కు స్థానికంగా మద్దతు ఇవ్వని పాత బ్రౌజర్‌ల కోసం, మీరు ఒక పాలీఫిల్‌ను ఉపయోగించవచ్చు. ఒక పాలీఫిల్ అనేది పాత బ్రౌజర్‌లలో కొత్త ఫీచర్ యొక్క కార్యాచరణను అందించే కోడ్ యొక్క ఒక భాగం. ఆన్‌లైన్‌లో అనేక AbortController పాలీఫిల్స్ అందుబాటులో ఉన్నాయి.

ముగింపు

AbortController ఇంటర్‌ఫేస్ జావాస్క్రిప్ట్‌లో అసమకాలిక ఆపరేషన్‌లను నిర్వహించడానికి ఒక శక్తివంతమైన సాధనం. AbortController ను ఉపయోగించడం ద్వారా, మీరు రద్దును సునాయాసంగా నిర్వహించే శుభ్రమైన, మరింత పనితీరు గల, మరియు మరింత పటిష్టమైన కోడ్‌ను వ్రాయవచ్చు. మీరు APIల నుండి డేటాను పొందుతున్నా, టైమర్‌లను సెట్ చేస్తున్నా, లేదా ఈవెంట్ లిజనర్‌లను నిర్వహిస్తున్నా, AbortController మీ వెబ్ అప్లికేషన్ల మొత్తం నాణ్యతను మెరుగుపరచడంలో మీకు సహాయపడుతుంది.

మరింత సమాచారం కోసం

• MDN వెబ్ డాక్స్: AbortController
• WHATWG DOM లివింగ్ స్టాండర్డ్: AbortController